<template>
	<view class="content">
		<view class="form-block" style="border-radius:30rpx 30rpx 0 0 ;">
			<view class="form-title">实名认证</view>
			<view class="sub-title">请完成人脸核身验证</view>
			<view class="form-item">
				<view class="form-label">姓名</view>
				<view class="form-content">
					<input v-model="form.realName" maxlength="10" :disabled="true" type="text" placeholder-class="inputPlaceholder"
						placeholder="请填写姓名" class="form-ctrl" />
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">身份证号</view>
				<view class="form-content">
					<input v-model="form.idCard" maxlength="18" :disabled="true" type="idcard" placeholder-class="inputPlaceholder"
						placeholder="请填写身份证号" class="form-ctrl" />
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="agreement-block">
				<checkbox-group @change="checkChange">
					<checkbox color="#FF7626" id="check" class="checkbox" /><label for="check" class="radio-label">我已阅读并同意<text class="agreement">《实名认证及在职认证服务协议》</text></label>
				</checkbox-group>
			</view>
			<view @click="handleSave" class="btn">开始认证</view>
		</view>
	</view>
</template>

<script>
	import {getScene} from '@/util/util.js'
	import { validate } from '@/util/validate';
	import {toRealNameExamine,getUserKeyInfo} from '@/api/company.js'
	export default{
		data(){
			return{
				form:{
					realName:'',
					idCard:'',
					checked:[],
				},
				rules:{
					checked: {
						name: '',
						required: false,
						validator: function(value, form, callback) {
							if(value.length==0){
								callback('请勾选同意协议！');
							}
							callback();
						}
					}
				},
				userKey:'',
			}
		},
		methods:{
			getInfo(param){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getUserKeyInfo(param).then((res)=>{
					this.form.realName=res.realName;
					this.form.idCard=res.idCard;
					this.userKey=res.userKey;
				})
			},
			handleSave(){
				if(validate(this.form,this.rules)){
					wx.startFacialRecognitionVerify({
						name:this.form.realName,
						idCardNumber:this.form.idCard,
						checkAliveType:2,
						success:(e)=>{
							if(e.errCode==0){
								uni.showLoading({
									title:'加载中',
									mask:true
								})
								toRealNameExamine({userKey:this.userKey,type:2}).then(()=>{
									this.showToast('验证成功',()=>{
										uni.redirectTo({
											url:`/pages/index/entrance`
										})
									})
								})
							}
						}
					})
					
				}
			},
			checkChange(e){
				this.form.checked=e.detail.value;
			},
		},
		onLoad(e) {
			const param=getScene(e.scene);
			this.getInfo(param)
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
	
		.btn {
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF7626;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 80rpx;
		}
	
		.user-photo-block {
			width: 100%;
			height: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
	
			.user-photo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}
	
		.form-block {
			width: 100%;
			background: #fff;
			padding: 30rpx;
	
			.form-title {
				font-size: 36rpx;
				font-weight: bold;
			}
	
			.sub-title {
				margin: 20rpx 0;
				font-size: 26rpx;
				color: #999;
			}
	
			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;
	
				.form-label {
					font-size: 28rpx;
					color: #999;
				}
	
				.form-content {
					display: flex;
					flex-direction: row;
					align-items: center;
	
					.form-ctrl {
						height: 100rpx;
						line-height: 100rpx;
						flex-grow: 1;
					}
	
					uni-combox {
						display: flex;
					}
	
					.arrow {
						flex-grow: 0;
						color: #999;
						font-size: 24rpx;
					}
				}
			}
	
			.form-item.photo {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-bottom: 30rpx;
	
				.photo {
					flex-grow: 0;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
	
				.form-label {
					flex-grow: 1;
				}
			}
		}
	}
	.agreement-block {
		width: 100%;
		margin-top: 40rpx;
		display: flex;
		flex-direction: row;
	
		.radio-label {
			font-size: 24rpx;
	
			.agreement {
				color: #FF7626;
			}
		}
	
		.checkbox {
			transform: scale(0.7);
		}
	}
</style>